{% load static %}
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>
<body style="height: 100%; margin: 0;position:relative;">

<div id="container2" style="height: 100%" class="col-sm-6"></div>

<div id="container" style="height: 100%" class="col-sm-6"></div>
<div class="form-group" style="position: absolute;top: 0px;left: 50%;">
    <select id="post_type" class="form-control">
        <option value="java工程师">java工程师</option>
        <option value="Python工程师">Python工程师</option>
        <option value="C，C++语言工程师">C，C++语言工程师</option>
        <option value="算法工程师">算法工程师</option>
        <option value="数据分析">数据分析</option>
        <option value="数据挖掘">数据挖掘</option>
        <option value="网络工程师">网络工程师</option>
        <option value="软件项目经理">软件项目经理</option>
        <option value="算法工程师">算法工程师</option>
        <option value="硬件工程师">硬件工程师</option>
        <option value="人工智能">人工智能</option>
        <option value="技术支持">技术支持</option>
        <option value="架构师">架构师</option>
        <option value="大数据工程师">大数据工程师</option>
        <option value="新媒体技术">新媒体技术</option>
        <option value="UI设计师">UI设计师</option>
        <option value="嵌入式">嵌入式</option>
        <option value="网络安全">网络安全</option>
        <option value="前端">前端</option>
        <option value="移动端">移动端</option>
        <option value="软件测试">软件测试</option>
        <option value="运维工程师">运维工程师</option>
    </select>
</div>


<script src="{% static 'js/jquery.min.js' %}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=Koy1xZ0kphShm4Fwg9vW3VOe5oqkS3Vs&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var dom2 = document.getElementById("container2");
    var myChart = echarts.init(dom);
    var myChart2 = echarts.init(dom2);

    window.onresize = function () {
        myChart.resize();
        myChart2.resize();
    }

    option = {
        title: {
            text: '学历要求占比',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: []
//
//        selected: data.selected
        },
        series: [
            {
                name: '学历要求',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option2 = {
        title: {
            text: '工作经验要求占比',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: []
//
//        selected: data.selected
        },
        series: [
            {
                name: '工作经验',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    genData();

    function genData() {
        myChart.showLoading();
        myChart2.showLoading();
        $.ajax({
            async: false,    //表示请求是否异步处理
            type: "get",    //请求类型
            url: "/getEducationAndExperienceOfCity",//请求的 URL地址
            dataType: "json",//返回的数据类型
            data: {"post_type": $("#post_type").val()},
            success: function (datas) {
                myChart.hideLoading();
                myChart2.hideLoading();

                option.legend.data = datas.legendData;
                option.series[0].data = datas.seriesData;

                option2.legend.data = datas.legendData2;
                option2.series[0].data = datas.seriesData2;

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

                if (option2 && typeof option2 === "object") {
                    myChart2.setOption(option2, true);
                }
            },
            error: function (data) {

            }
        });
    }

    $("#post_type").change(function () {
        genData();
    });

</script>
</body>
</html>